<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <title>管理员导航</title>
</head>
<body>
<div th:fragment="AdminNav">
    <style>
        body {
            padding-top: 60px;
            background-color: #f4f6f9;
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding-bottom: 0 !important;
            min-height: 100vh;
            position: relative;
        }
        
        /* 导航栏样式 */
        .navbar-custom {
            background-color: #2c3e50;
            border: none;
            box-shadow: 0 1px 8px rgba(0,0,0,0.3);
        }
        
        .navbar-brand {
            padding: 10px 15px;
            height: 60px;
            line-height: 40px;
            font-weight: 600;
            color: #fff !important;
        }
        
        .navbar-brand img {
            height: 40px;
            margin-right: 10px;
            display: inline-block;
            border-radius: 50%;
        }
        
        .navbar-custom .navbar-nav > li > a {
            color: #ecf0f1;
            padding-top: 20px;
            padding-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .navbar-custom .navbar-nav > li > a:hover,
        .navbar-custom .navbar-nav > li > a:focus {
            color: #e74c3c;
            background-color: transparent;
        }
        
        .navbar-custom .navbar-right > li > a {
            padding: 15px;
        }
        
        .user-info {
            padding: 15px;
            color: #e67e22;
            font-weight: 500;
        }
        
        .logout-btn {
            cursor: pointer;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 60px;
            bottom: 0;
            left: 0;
            z-index: 1000;
            display: block;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: #2c3e50;
            box-shadow: 1px 0 10px rgba(0,0,0,0.1);
            width: 240px;
        }
        
        .sidebar-header {
            padding: 15px;
            color: #ecf0f1;
            background-color: #34495e;
            font-weight: 600;
            text-align: center;
            margin-bottom: 10px;
            border-bottom: 1px solid #3d566e;
        }
        
        .nav-sidebar {
            margin: 0;
        }
        
        .nav-sidebar .nav-section {
            padding: 12px 20px;
            color: #95a5a6;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            margin-top: 10px;
            border-bottom: 1px solid #3d566e;
        }
        
        .nav-sidebar > li > a {
            padding: 12px 20px;
            color: #ecf0f1;
            border-left: 4px solid transparent;
            transition: all 0.2s ease;
        }
        
        .nav-sidebar > li > a:hover,
        .nav-sidebar > li > a:focus {
            background-color: #34495e;
            color: #e74c3c;
            border-left-color: #e74c3c;
        }
        
        .nav-sidebar > li.active > a {
            background-color: #34495e;
            color: #e74c3c;
            border-left-color: #e74c3c;
        }
        
        .menu-icon {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        /* 主内容区域 */
        .main-content {
            display: block !important;
            position: fixed !important;
            top: 60px !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 240px !important;
            padding: 20px !important;
            background-color: #f4f6f9 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                width: 70px;
            }
            
            .main-content {
                left: 70px !important;
            }
            
            .nav-sidebar > li > a > span {
                display: none;
            }
            
            .menu-icon {
                margin-right: 0;
                font-size: 18px;
            }
            
            .sidebar-header {
                font-size: 0;
                padding: 15px 0;
            }
            
            .sidebar-header:after {
                content: "≡";
                font-size: 20px;
            }
        }
    </style>
    
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./AdminManage">
                    <img src="../img/1.png" alt="Logo" class="img-tx"/>
                    后台管理中心
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#" class="user-info">
                            <i class="glyphicon glyphicon-user"></i>
                            <span th:text="${session.Alis != null ? session.Alis.getTruename() : '管理员'}"></span> (管理员)
                        </a>
                    </li>
                    <li>
                        <a class="logout-btn" onclick="loginOut()">
                            <i class="glyphicon glyphicon-log-out"></i> 退出系统
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 侧边导航栏 -->
    <div class="sidebar">
        <div class="sidebar-header">系统管理菜单</div>
                <ul class="nav nav-sidebar">
            <li class="nav-section">系统功能</li>
            <li>
                <a th:href="@{/AdminManage}">
                    <i class="glyphicon glyphicon-dashboard menu-icon"></i>
                    <span>控制面板</span>
                </a>
            </li>
            <li>
                <a th:href="@{/AdminCourseManage}">
                    <i class="glyphicon glyphicon-book menu-icon"></i>
                    <span>课程管理</span>
                </a>
            </li>
            <li>
                <a th:href="@{/AdminPjclassManage}">
                    <i class="glyphicon glyphicon-education menu-icon"></i>
                    <span>班级管理</span>
                </a>
            </li>
            <li>
                <a th:href="@{/AdminTeacherManage}">
                    <i class="glyphicon glyphicon-briefcase menu-icon"></i>
                    <span>老师管理</span>
                </a>
            </li>
                </ul>
    </div>

    <!-- 主内容区域 - 此区域将被各页面的内容动态替换 -->
    <div class="main-content"></div>
    
    <script>
        function loginOut() {
            if(confirm('确定要退出系统吗?')){
                // sessionStorage.clear();
                location.replace("./Alogout");
            }
        }
        
        $(document).ready(function() {
            // 根据当前URL设置活动菜单
            var path = window.location.pathname;
            $('.nav-sidebar li a').each(function() {
                var href = $(this).attr('href');
                if (href && path.indexOf(href.substring(href.lastIndexOf('/') + 1)) >= 0) {
                    $(this).parent().addClass('active');
                }
            });
        });
    </script>
</div>
</body>
</html>